.select-container {
  padding-top: 350px;
  .-flex-layout();
  .selectHotelsBox {
    width: 100%;
    height: 80px;
    margin-top: -8px;
    // margin-left: -24px;
    position: relative;
    .timeBox {
      position: absolute;
      z-index: 99;
      top: 17px;
      left: 168px;
      width: 73px;
      height: 44px;
      color: #19293f;
      background-color: #fff;
      div {
        .-text-height(20px);
        margin-bottom: 4px;
        font-size: 20px;
        &:nth-last-of-type(1) {
          margin-bottom: 0px;
        }
      }
    }
    /deep/ .van-dropdown-menu__bar {
      height: 80px;
      // width: calc(100% + 24px);
      box-shadow: none;
      .van-dropdown-menu__item {
        width: 152px;
        flex: unset;
        // outline: 1px solid red;
        position: relative;
        &:nth-of-type(2) {
          width: 130px;
          // outline: 1px solid red;
        }
        &:not(:nth-last-of-type(1))::after {
          position: absolute;
          top: 26px;
          right: -1px;
          border-right: 1px solid #ececec;
          height: 26px;
          width: 1px;
          content: "";
        }
        .van-dropdown-menu__title {
          font-size: 24px;
          padding-left: 0;
          margin-left: -8px;
          div {
            max-width: 120px;
          }
        }
        .van-dropdown-menu__title::after {
          border-color: transparent transparent #999 #999;
          opacity: 1;
        }

        .van-dropdown-menu__title--active {
          color: #05c485;
        }
        .van-dropdown-menu__title--active::after {
          border-color: transparent transparent #05c485 #05c485;
        }
      }
    }

    /deep/.van-dropdown-item--down .van-dropdown-item__content {
      border-top: 1px solid #ebedf0;
      border-radius: 0px 0px 16px 16px;
      max-height: 100%;
      .van-cell::after {
        border-bottom: none;
      }
      .van-dropdown-item__option--active {
        color: #05c485;
        .van-dropdown-item__icon {
          color: #05c485;
        }
      }
    }

    .priceBox {
      width: 100%;
      overflow-x: hidden;
      position: relative;
      padding-bottom: 160px;
      box-sizing: border-box;
      .title {
        color: #333333;
        margin: 40px 24px 64px 24px;
        var {
          font-size: 28px;
          .-text-height(28px);
          font-weight: bolder;
        }
        span {
          font-size: 24px;
          font-weight: bold;
        }
      }
      .sliderBox {
        width: 590px;
        height: 1px;
        line-height: 50px;
        margin: 86px 48px 118px 36px;
        position: relative;
        // /deep/.van-slider{
        //     border: 1px solid red;
        // }
        .ruler {
          position: absolute;
          // width: calc(100% + 72px);
          position: absolute;
          top: 34px;
          left: -6px;
          .-text-height(20px);
          .-flex-layout(row, center, space-between);
          .num {
            &:nth-of-type(1) {
              margin-right: 64px;
            }
            margin-right: 52px;
            font-size: 20px;
            color: #999999;
          }
        }
        /deep/.custom-button {
          background: #ffffff;
          // border: 1px solid #D2D7E0;
          box-sizing: border-box;
          border-radius: 100px;
          width: 48px;
          height: 48px;
          background: url("https://file.40017.cn/trainwechat/miniapp/hsrtfront/travel_around_priceRange_slider.png")
            no-repeat center;
          background-size: 100% auto;
        }
      }
      .priceTagBox {
        margin: 64px 0 0px 24px;
        var {
          font-size: 28px;
          .-text-height(28px);
          font-weight: bolder;
          color: #333333;
        }
        .priceRangeTag {
          .-flex-layout(row, center, flex-start);
          overflow-x: scroll;
          padding-bottom: 20px;
          margin: 32px 0 -20px 0;
          div {
            background: #f5f6fa;
            border-radius: 8px;
            min-width: 168px;
            .-text-height(80px);
            color: #333333;
            text-align: center;
            margin-right: 10px;
            &:nth-last-of-type(1) {
              margin-right: 0px;
            }
            &.active {
              background: #06c584;
              color: #fff;
            }
          }
        }
      }
      .clearAndConfirm {
        position: absolute;
        bottom: 0;
        height: 128px;
        box-sizing: border-box;
        width: 100%;
        border-top: 1px solid #ebedf0;
        .-flex-layout(center, center);
        .clear {
          .-text-height(42px);
          color: #666666;
          width: 120px;
          font-size: 30px;
          text-align: center;
          margin-right: 50px;
          white-space: nowrap;
        }
        .confirm {
          background: #06c584;
          border-radius: 44px;
          .-text-height(80px);
          text-align: center;
          color: #ffffff;
          font-size: 30px;
          width: 498px;
        }
      }
    }
    .areaBox {
      width: 100%;
      height: auto;
      overflow-x: hidden;
      padding-bottom: 128px;
      position: relative;
      .selectItemBox {
        width: 100%;
        height: 763px;
        .-flex-layout(row, flex-start, flex-start);
        // border: 1px solid red;
        .firstClass,
        .secondClass,
        .thirdClass {
          width: 188px;
          height: 763px;
          overflow: auto;
          overflow-y: auto;
          background: #f5f6fa;
          padding-bottom: 27px;
          box-sizing: border-box;
          .-flex-layout(column, center, flex-start);
          p {
            width: 100%;
            height: 92px;
            min-height: 92px;
            display: flex;
            align-items: center;
            text-align: left;
            var {
              color: #333333;
              font-size: 28px;
              .-text-height(28px);
              display: inline-block;
              margin-left: 38px;
            }
            &.active {
              background: #ffffff;
              var {
                color: #06c584;
              }
            }
            &.activeWithSecond {
              background: #f9fafc;
              var {
                color: #06c584;
              }
            }
          }
        }
        .secondClass {
          background: #f9fafc;
          p.active {
            background: #fff;
          }
        }
        .firstClass,
        .secondClass {
          p {
            position: relative;
            var {
              width: calc(100% - 38px);
              .-text-ellipsis;
            }
            .chosenCircle {
              position: absolute;
              width: 10px;
              left: 14px;
              top: calc(50% - 12px);
              border-radius: 50%;
            }
          }
        }
        .thirdClass {
          background: #fff;
          width: calc(100% - 188px);
          min-width: 576px;
          p {
            position: relative;
            var {
              max-width: 440px;
              .-text-ellipsis;
            }
          }
          .chosenArrow {
            width: 19px;
            height: 14px;
            position: absolute;
            right: 53px;
            top: calc(50% - 7px);
          }
        }
        .thirdClass_withSecond {
          width: calc(100% - 376px);
          min-width: 376px;
          p {
            var {
              max-width: 260px;
              .-text-ellipsis;
            }
          }
        }
      }
      .clearAndConfirm {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 128px;
        box-sizing: border-box;
        width: 100%;
        border-top: 1px solid #ebedf0;
        .-flex-layout(center, center);
        .clear {
          .-text-height(42px);
          color: #666666;
          width: 120px;
          font-size: 30px;
          text-align: center;
          margin-right: 50px;
        }
        .confirm {
          background: #06c584;
          border-radius: 44px;
          .-text-height(80px);
          text-align: center;
          color: #ffffff;
          font-size: 30px;
          width: 498px;
        }
      }
    }
    /deep/&.isOperatedByUserSortRule .van-dropdown-menu__bar {
      .van-dropdown-menu__item:nth-last-of-type(1) {
        .van-dropdown-menu__title {
          color: #05c485;
        }
        .van-dropdown-menu__title::after {
          border-color: transparent transparent #05c485 #05c485;
        }
      }
    }

    /deep/&.isOperatedByUserPriceRange .van-dropdown-menu__bar {
      // 用户操作过之后就一直是绿色，除非刷新
      .van-dropdown-menu__item:nth-last-of-type(2) {
        .van-dropdown-menu__title {
          color: #05c485;
        }
        .van-dropdown-menu__title::after {
          border-color: transparent transparent #05c485 #05c485;
        }
      }
    }
    /deep/&.isOperatedByUserAreaRange .van-dropdown-menu__bar {
      .van-dropdown-menu__item:nth-last-of-type(3) {
        .van-dropdown-menu__title {
          color: #05c485;
        }
        .van-dropdown-menu__title::after {
          border-color: transparent transparent #05c485 #05c485;
        }
      }
    }
  }
  /deep/.topNavBarBox {
    background: #fff;
    // outline: 1px solid red;
    padding-top: 28px;
    .titleBar {
      margin-top: 0;
    }
  }
  .topNavBarBox_Fixed {
    width: calc(100% - 24px);
    position: fixed;
    top: 0;
    left: 24px;
    z-index: 99;
    // width: 100%;
  }
  .hotelsContainer_topNavBarBox_Fixed_chooseHotel {
    margin-top: 276px;
  }
  .hotelsContainer_topNavBarBox_Fixed_chooseScene {
    margin-top: 204px;
  }
  .firstCityLongTitle {
    /deep/ .van-dropdown-menu__bar .van-dropdown-menu__item:nth-of-type(1) {
      .van-dropdown-menu__title {
        padding-right: 5px;
        max-width: 130px;
      }
    }
  }
  .hideSortNearMeOption {
    /deep/ .van-dropdown-item__content {
      .van-dropdown-item__option:nth-of-type(2) {
        display: none;
      }
    }
  }

  // 日历组件按钮位置优化
  /deep/.van-calendar__popup {
    .van-calendar__footer .van-button {
      height: 100px;
      .van-button__content .van-button__text {
        font-size: 36px;
      }
    }
  }
}
